<template>
  <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <h1>添加奶茶</h1>
    <el-form-item label="餐品" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="单价" prop="price" >
      <el-input type="price" v-model="ruleForm.price" autocomplete="off"></el-input>
    </el-form-item>
   
    <el-form-item label="图片" prop="image">
        <input type="file" id="file" name="file">
        <!-- <el-button type="primary" @click="uploadFile">上传<i class="el-icon-upload el-icon--right"></i></el-button> -->
        <input type="button" value="保存" @click="uploadFile"><br>
        <img src="" id="img" alt="" width="100px" v-model="ruleForm.image">
      <!-- <el-upload
        action=""
        accept="image/jpeg,image/gif,image/png"
        :on-change="onUploadChange"
        :auto-upload="false"
        list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload> -->

    </el-form-item>
    <el-form-item label="简介" prop="content">
      <el-input type="textarea" v-model="ruleForm.content"></el-input>
    </el-form-item>
    <el-form-item label="状态" prop="state">
      <el-select v-model="ruleForm.state" placeholder="请选择活动区域">
        <el-option label="上架" value="上架"></el-option>
        <el-option label="下架" value="下架"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="上架时间" required>
      <el-col :span="11">
        <el-form-item prop="date">
          <el-date-picker type="date"  placeholder="选择日期"  v-model="ruleForm.date" style="width: 100%;"></el-date-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm()">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  import $ from 'jquery'
  export default {
    data() {
      return {
        // file:'',
        // fileList:[],
        ruleForm: {
          name: '',
          price: '',
          image: '',
          content: '',
          state:'',
          date: '',
        },
      };
    },
    created() {
          // this.token = localStorage.getItem('auth_code');
          // this.imageUrl = localStorage.getItem('imageUrl');
         
    },
    methods: {
      submitForm() {
        // var date=this.ruleForm.date.toLocaleString();
        //console.log(this.ruleForm);
        //把element的this.ruleForm.date的值转换为“xxxx-xx-xx”
        let date = new Date(this.ruleForm.date)
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        let d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        const time =  y + '-' + m + '-' + d;
        this.ruleForm.date=time;
        console.log(this.ruleForm.date);

        // onUploadChange();
        // console.log(file.url);
        $.ajax({
          url:'http://localhost:8081/exec/milktea/sever_add.php',
          type:"POST",
          dataType:'json',
          async:false,
          data: {
              name: this.ruleForm.name,
              price: this.ruleForm.price,
              image: this.ruleForm.image,
              content: this.ruleForm.content,
              state:this.ruleForm.state,
              date: this.ruleForm.date,
          },
          success: function (res){
              //console.log("success");
          },
          error : function (res) {
              //console.log("error")
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      uploadFile(){
        var hrr;
        //console.log(hrr);
        var file=document.getElementById('file').files[0];//图片上传
        if (file==null||file=="") {
          alert("请选择要上传的图片！");  
          return false;      
        }
        var formData=new FormData();
        formData.append('file',file);//添加一个新值到FormData对象内的一个已存在的键中，如果键不存在则会添加该键
        $.ajax({
          url:'http://localhost:8081/exec/milktea/upload.php',//目标
          type:'POST',//传值方式
          data:formData,
          dataType:'text',//返回类型
          async:false,//异步传输
          contentType:false,//告诉jQuery不要去设置Content-Type请求头
          cache:false,//每次读取的是最新的数据
          processData:false,//告诉jQuery不要去处理发送的数据
          success(res){
            //alert(res);
            $("img").attr('src',res);//对图片路径进行赋值
            //console.log(res);
            hrr=res;
            console.log(hrr);
          }
        }),
        this.ruleForm.image=hrr;
        // console.log(this.ruleForm.image);

      }
    }
  }
</script>
<style scoped>
.demo-ruleForm{
  width: 600px;
}
</style>